import React, { Component } from "react";

export default class App extends Component {
  state = {
    list: [1, 2, 3, 4, 4],
    list2: [
      { id: 1, name: "用户1", status: 1 },
      { id: 2, name: "用户2", status: 1 },
      { id: 3, name: "用户3", status: 1 },
    ],
  };
  handleDelete(index) {
    const listResult = [...this.state.list2];
    listResult.splice(index, 1);
    this.setState({ list2: listResult });
  }
  render() {
    return (
      <div>
        <ul>
          {this.state.list2.map((item, index) => (
            <li style={{ display: "flex", alignItems: "center" }} key={item.id}>
              <div className="item-name">{item.name}</div>
              <div className="button-wrapper">
                <button onClick={() => this.handleDelete(index)}>删除</button>
              </div>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}
